<script>
import {mapActions, mapGetters, mapMutations, mapState} from "vuex";
import TestVuex from "@/components/TestVuex.vue";
// import Login from "@/views/Login.vue";
import Login from "@/components/Login.vue";
import {useCountStore} from "@/store/counter.js";
import {useCartStore} from '@/store/cart.js'
import Index from "@/components/Index.vue";

export default {
    computed: {
        user() {
            return this.$store.state.username
        },
        // 使用 this.age  指代 this.$store.state.age
        ...mapState(['age', 'count']), // age () {return this.$store.state.age}
        ...mapState({
            // this.years 指代 this.$store.state.age
            years: "age"  // year() {return this.$store.state.age}
        }),
        // login() {
        //     return this.$store.getters.getLogin
        // }
        ...mapGetters({
            login: "getLogin" // this.login 指代的 是 this.$store.getters.getLogin
        })
    },
    components: {
        TestVuex,
        Login,
        Index
    },
    methods: {
        // addAge() {
        //     // 提交修改事件 触发 setAge 函数
        //     // this.$store.commit('setAge', 10)
        //     // this.$store.commit({
        //     //     type: 'setAge',
        //     //     amount: 20
        //     // })
        //     // 分发 Action  调用 Actions 中的一个方法
        //     this.$store.dispatch('incrementAge')
        //     console.log("addAge 结束")
        // },
        ...mapActions({
            addAge: 'incrementAge' // this.addAge 函数 指代 this.$store.dispatch('incrementAge')
        }),
        ...mapMutations({
            set: 'setCount', // this.set 函数 将指代 this.$store.commit('setAge')
            // this.setAge(20)  ==> this.$store.commit('setAge', 20)
            setAge: 'setAge' // 声明的 mutation 需要提交载荷 调用 函数时 直接传递参数就可
        }),
        test() {
            console.log(this.store.getCount)
        }
    },
    setup() {
        const store = useCountStore()
        return {
            store
        }
    }
}
</script>

<template>
    <!--<el-container>-->
    <!--    <el-header>顶部导航栏</el-header>-->
    <!--    <el-container>-->
    <!--        <el-aside>-->
    <!--            &lt;!&ndash;el-menu router属性&ndash;&gt;-->
    <!--            <el-menu-->
    <!--                default-active="/"-->
    <!--                class="el-menu-vertical-demo"-->
    <!--                @open="handleOpen"-->
    <!--                @close="handleClose"-->
    <!--                router-->
    <!--            >-->
    <!--                <el-menu-item index="/">-->
    <!--                    <el-icon><Service /></el-icon>-->
    <!--                    <span>首页</span>-->
    <!--                </el-menu-item>-->
    <!--                <el-menu-item index="/userInfo"><el-icon><View /></el-icon>用户信息</el-menu-item>-->
    <!--                <el-menu-item index="/goodsInfo"><el-icon><Lock /></el-icon>商品信息</el-menu-item>-->
    <!--                <el-menu-item index="/role"><el-icon><Filter /></el-icon>角色信息</el-menu-item>-->

    <!--            </el-menu>-->
    <!--        </el-aside>-->
    <!--        <el-main>-->
    <!--            <router-view/>-->
    <!--        </el-main>-->
    <!--    </el-container>-->
    <!--</el-container>-->

    <!--<router-link to="/goods/1">商品1</router-link>-->
    <!--<router-link to="/goods/2">商品2</router-link>-->
    <!--<router-link to="/goods/3">商品3</router-link>-->
    <!--<router-link to="/login">去登录</router-link>-->
    <!--<router-view/>-->

    <!--命名视图 在路由配置中 通过 components 进行配置 components 值是一个对象 {name的值 : 组件名}-->
    <!--<router-view name="Header"></router-view>-->
    <!--<router-view></router-view>-->
    <!--<router-view name="Footer"></router-view>-->
    <!--$store 指代的就是 store 实例-->
    <!--<p>{{ $store.state.username }}</p>-->
    <!--<p>{{ user }}</p>-->
    <!--<p>{{ age }}</p>-->
    <!--<p>{{ years }}</p>-->
    <!--<p>age: {{$store.getters.getAge}}</p>-->
    <!--<el-button @click="addAge">+1</el-button>-->
    <!--<el-button @click="set">set</el-button>-->
    <!--<el-button @click="setAge(20)">设置</el-button>-->
    <!--<p>count: {{count}}</p>-->
    <!--<p>分割线</p>-->
    <!--<Login />-->
    <!--<p>login: {{ login ? login.username : '暂未登录'}}</p>-->

    <!--<TestVuex />-->
    <!--<login />-->
    <!--<button @click="test">点击一下</button>-->
    <!--<router-view />-->
    <Index />
</template>

<style scoped>
.logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
    transition: filter 300ms;
}

.logo:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
    filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
